<template>
  <div class="bg" v-loading="loading">
    <div class="title">商铺设置</div>
    <div class="describe">完善更多信息更能体现公司实力，提高曝光率</div>

    <el-divider></el-divider>

    <!-- 基本信息 -->
    <div class="companyInformation">
      <div class="content">
        <!-- 左侧表单 -->
        <div class="left">
          <div class="subheading">企业信息</div>
          <div class="info">
            <!-- <el-form ref="form" :model="form" label-width="80px"> -->
            <el-form label-width="80px">
              <el-form-item label="公司名称">
                <el-input
                  placeholder="请正确输入公司名称"
                  v-model="company"
                  :disabled="!edit"
                ></el-input>
              </el-form-item>

              <div class="companytype">
                <div class="leftText">企业类型</div>
                <div
                  class="selectItem"
                  v-for="(item, index) in itemList"
                  :key="index"
                  >
                  <!-- @click="selectKind(index)" -->
                  <img
                    src="../../assets/bussiness/btn_dl_sel@2x.png"
                    class="checkImage"
                    alt=""
                    v-if="currentIndex == index"
                  />
                  <div class="checkbox" v-else></div>
                  {{ item.name }}
                </div>
              </div>

              <el-form-item label="主营类别">
                <el-select v-model="kind" placeholder="请选择主营类别">
                  <el-option
                    v-for="item in kindOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="主营产品">
                <el-input
                  placeholder="请输入公司主营产品，如ABS"
                  v-model="primary"
                ></el-input>
              </el-form-item>

              <el-form-item label="所在地区">
                <el-cascader
                  placeholder="请选择所在地区"
                  :options="addressList"
                  :props="{ expandTrigger: 'hover', value: 'label' }"
                  @change="handleChange"
                  v-model="handleAddress"
                ></el-cascader>
              </el-form-item>

              <el-form-item label="详细地址">
                <el-input
                  placeholder="请输入详细地址（不需要重复输入省市）"
                  v-model="address"
                ></el-input>
              </el-form-item>

              <el-form-item label="公司简介">
                <el-input
                  type="textarea"
                  v-model="introduction"
                  maxlength="800"
                  show-word-limit
                  placeholder="请输入公司简介"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- <div class="line"></div> -->

        <!-- 右侧上传处 -->
        <div class="right">
          <div class="subheading">图片信息</div>
          <div class="logo">
            <div class="leftText">公司logo</div>
            <div class="uploadPlace">
              <el-upload
                :class="{ hide: logoImage }"
                :action="imgUpload"
                list-type="picture-card"
                :limit="1"
                accept="image/*"
                :on-success="successCompanyLogo"
                :disabled="!edit"
                :file-list="logoList"
              >
                <div class="uplogo">
                  <img
                    src="../../assets/bussiness/icon_rzgys_sc@2x.png"
                    alt=""
                    class="image"
                  />
                  <span class="text">请上传</span>
                </div>
              </el-upload>
            </div>
          </div>

          <div class="license">
            <div class="leftText">企业执照</div>
            <div class="uploadPlace">
              <el-upload
                :class="{ hide: licenseImage }"
                :action="imgUpload"
                list-type="picture-card"
                :limit="1"
                accept="image/*"
                :on-success="successlicenseLogo"
                :disabled="!edit"
                :file-list="licenseList"
              >
                <div class="uplogo">
                  <img
                    src="../../assets/bussiness/icon_rzgys_sc@2x.png"
                    alt=""
                    class="image"
                  />
                  <span class="text">请上传</span>
                </div>
              </el-upload>
              <div class="checkbox">
                <input
                  type="checkbox"
                  v-model="showLicense"
                  @click="changeLicense"
                />不显示执照
              </div>
            </div>
          </div>

          <div class="store">
            <div class="leftText">线下门店/办公场所照</div>
            <div class="uploadPlace">
              <el-upload
                :class="{ hide: storeSecondImage }"
                :action="imgUpload"
                list-type="picture-card"
                :limit="2"
                accept="image/*"
                :on-success="successChange"
                :on-remove="hideLogo"
                :file-list="storeList"
              >
                <div class="uplogo">
                  <img
                    src="../../assets/bussiness/icon_rzgys_sc@2x.png"
                    alt=""
                    class="image"
                  />
                  <span class="text">请上传</span>
                </div>
              </el-upload>
            </div>
          </div>

          <div class="store">
            <div class="leftText">生产车间照</div>
            <div class="uploadPlace">
              <el-upload
                :class="{ hide: workshopSecondImage }"
                :action="imgUpload"
                list-type="picture-card"
                :limit="2"
                accept="image/*"
                :on-success="successmaterials"
                :on-remove="hideMateria"
                :file-list="workshopList"
              >
                <div class="uplogo">
                  <img
                    src="../../assets/bussiness/icon_rzgys_sc@2x.png"
                    alt=""
                    class="image"
                  />
                  <span class="text">请上传</span>
                </div>
              </el-upload>
            </div>
          </div>

          <div class="subheading">视频介绍</div>
          <div class="video">
            <div class="leftText">宣传视频</div>
            <div class="uploadPlace">
              <el-upload
                accept="video/*"
                ref="videoUpload"
                :action="imgUpload"
                list-type="picture-card"
                :multiple="false"
                :show-file-list="false"
                :on-progress="progressBroadcast"
                :on-success="broadcastSuccess"
                :on-remove="hidebroadcast"
              >
                <div
                  class="uplogo"
                  v-if="broadcastUrl == ''"
                  :class="{ hide: broadcastUrl }"
                >
                  <img
                    src="../../assets/bussiness/icon_rzgys_sc@2x.png"
                    alt=""
                    class="image"
                  />
                  <span class="text">请上传</span>
                </div>
                <img
                  class="closeIcon"
                  src="../../assets/bussiness/gb@3x.png"
                  v-if="broadcastUrl"
                  alt=""
                  @click.stop="changeBroadcastUrl"
                />
                <video
                  :src="broadcastUrl | urlLoad"
                  class="secondVideo"
                  v-if="broadcastUrl"
                ></video>
              </el-upload>
              <span>（只可上传一个，限30S以内）</span>
            </div>
          </div>

          <div class="video">
            <div class="leftText">产品视频</div>
            <div class="uploadPlace">
              <el-upload
                accept="video/*"
                ref="videoUpload"
                :action="imgUpload"
                list-type="picture-card"
                :multiple="false"
                :show-file-list="false"
                :on-progress="progressProduct"
                :on-success="productSuccess"
                :on-remove="hideproduct"
              >
                <div
                  class="uplogo"
                  v-if="productUrl == ''"
                  :class="{ hide: productUrl }"
                >
                  <img
                    src="../../assets/bussiness/icon_rzgys_sc@2x.png"
                    alt=""
                    class="image"
                  />
                  <span class="text">请上传</span>
                </div>
                <img
                  class="closeIcon"
                  src="../../assets/bussiness/gb@3x.png"
                  v-if="productUrl"
                  alt=""
                  @click.stop="changeProductUrl"
                />
                <video
                  class="secondVideo"
                  :src="productUrl | urlLoad"
                  v-if="productUrl"
                ></video>
              </el-upload>
              <span>（只可上传一个，限30S以内）</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <button class="cancelButton button" @click="storeDetail">取消</button>
    <button class="submitButton button" @click="submit">提交</button>
  </div>
</template>

<script>
import utils from "../../utils/utils";
import regionJson from "@/json/region";
import { urlLoad } from '/src/filters/index.js'

export default {
  data() {
    return {
      loading: false,
      company: "",
      name: "",
      primary: "",
      address: "",
      introduction: "",
      type: "",
      kind: "",
      addressList: [],
      userInfo: {},
      edit: true,
      imgUpload: "https://www.yousubao-01.com/util/file/upload",
      logoImage: false,
      licenseImage: false,
      storeSecondImage: false,
      workshopSecondImage: false,
      broadcastUrl: "",
      productUrl: "",
      showLicense: false, // false显示 true不显示
      handleAddress: [],
      logoList: [],
      imageList: "",
      licenseList: [],
      imageList2: "",
      storeList: [],
      imageList3: "",
      workshopList: [],
      imageList4: "",
      currentIndex: -1,
      itemList: [{ name: "生产型企业" }, { name: "贸易型企业" }],
      kindOptions: [
        { value: "塑胶原料" },
        { value: "改性塑料" },
        { value: "再生塑料" },
        { value: "塑料助剂" },
        { value: "塑料机械" },
        { value: "塑料制品" },
        { value: "塑料模具" },
        { value: "废旧塑料" },
        { value: "检测机构" },
        { value: "物流仓库" },
        { value: "其他服务" },
      ],
      userMessage:{}
    };
  },
  created() {
    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
    this.addressList = regionJson;
    this.storeDetail();
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      let res = await this.$apiFun.getUserInfo();
      this.userMessage = res.result;
    },

    // 选择地址
    handleChange(label) {
      this.province = label[0];
      this.city = label[1];
    },

    selectKind(index) {
      this.currentIndex = index;
      this.type = this.itemList[this.currentIndex].name;
      // console.log("this.type",this.type);
    },

    // 企业商铺详情
    async storeDetail() {
      let params = {
        memberId: this.userInfo.id,
      };
      let res = await this.$apiFun.storeDetail(params);

      this.company = res.result.supplierInformationCompanyName;

      if (this.company !== "") {
        this.edit = false;
      }
      this.type =
        res.result.supplierInformationEnterpriseType == "生产型企业"
          ? (this.currentIndex = 0)
          : (this.currentIndex = 1);

      this.handleAddress = [
        res.result.supplierInformationProvince,
        res.result.supplierInformationCity,
      ];

      this.address = res.result.supplierInformationAddress;
      this.introduction = res.result.supplierInformationCompanyBrief;
      this.kind = res.result.supplierInformationTheMainType;
      this.primary = res.result.supplierInformationTheMainProduct;
      this.showLicense =
        res.result.supplierInformationBusinessLicenseShow == 1 ? false : true;
      // console.log("详情返回showLicense",this.showLicense);
      this.logoImage = true;
      this.licenseImage = true;
      if (res.result.supplierInformationShopUrl.split(",").length == 2) {
        //判断线下门店参数返回长度
        this.storeSecondImage = true;
      } else {
        this.storeSecondImage = false;
      }
      if (res.result.supplierInformationWorkshopUrl.split(",").length == 2) {
        //判断生产车间照参数返回长度
        this.workshopSecondImage = true;
      } else {
        this.workshopSecondImage = false;
      }

      this.broadcastUrl = res.result.supplierInformationPromotionalVideoUrl; //宣传视频
      this.productUrl = res.result.supplierInformationProductVideoUrl; //产品视频
      this.type = this.itemList[this.currentIndex].name;

      // 公司logo
      if (res.result.supplierInformationCompanyLogoUrl == "") {
        this.logoList = [];
        this.logoImage = false;
      } else {
        this.logoList = res.result.supplierInformationCompanyLogoUrl.split(",");
        this.logoList = this.logoList.map((item) => {
          return {
            name: item,
            url: urlLoad(item),
          };
        });
      }

      // 营业执照
      if (res.result.supplierInformationBusinessLicenseUrl == "") {
        this.licenseList = [];
        this.licenseImage = false;
      } else {
        this.licenseList =
          res.result.supplierInformationBusinessLicenseUrl.split(",");
        this.licenseList = this.licenseList.map((item) => {
          return {
            name: item,
            url: urlLoad(item),
          };
        });
      }

      // 门店照
      if (res.result.supplierInformationShopUrl == "") {
        this.storeList = [];
        this.storeSecondImage = false;
      } else {
        this.storeList = res.result.supplierInformationShopUrl.split(",");
        this.storeList = this.storeList.map((item) => {
          return {
            name: item,
            url: urlLoad(item),
          };
        });
      }

      // 生产车间照
      if (res.result.supplierInformationWorkshopUrl == "") {
        this.workshopList = [];
        this.workshopSecondImage = false;
      } else {
        this.workshopList =
          res.result.supplierInformationWorkshopUrl.split(",");
        this.workshopList = this.workshopList.map((item) => {
          return {
            name: item,
            url: urlLoad(item),
          };
        });
      }
    },

    changeLicense(){
      // 改变营业执照
      this.showLicense = !this.showLicense;
    },

    // 图片上传--公司logo
    successCompanyLogo(response, file, fileList) {
      var pictureList = [];
      fileList.forEach((item) => {
        var image = item.response.result;
        pictureList.push(image);
      });
      this.imageList = pictureList.toString();
      if (fileList.length == 1) {
        this.logoImage = true;
      }
    },

    // 图片上传--执照
    successlicenseLogo(response, file, fileList) {
      var pictureList2 = [];

      // 判断图片长度
      fileList.forEach((item) => {
        var image = item.response.result;
        pictureList2.push(image);
      });
      this.imageList2 = pictureList2.toString();
      if (fileList.length == 1) {
        this.licenseImage = true;
      }
    },

    // 图片上传--线下门店/办公场所照
    successChange(response, file, fileList) {
      var pictureList3 = [];
      // 判断图片长度
      fileList.forEach((item) => {
        var image = "";
        if (item.response) {
          image = item.response.result;
        } else {
          image = item.url;
        }
        // var image = this.IMG_URL + item.response.result;
        pictureList3.push(image);
      });
      this.imageList3 = pictureList3.toString();

      if (fileList.length == 2) {
        this.storeSecondImage = true;
      }
    },
    // 删除线下门店照
    hideLogo(file, fileList) {
      var pictureList3 = [];
      for (let i in fileList) {
        pictureList3.push(fileList[i].url);
      }
      this.imageList3 = pictureList3.toString();

      setTimeout(() => {
        this.storeSecondImage = false;
      }, 1000);
    },

    // 图片上传--生产车间照
    successmaterials(response, file, fileList) {
      var pictureList4 = [];
      // 判断图片长度
      fileList.forEach((item) => {
        var image = "";
        if (item.response) {
          image = item.response.result;
        } else {
          image = item.url;
        }
        // var image = this.IMG_URL + item.response.result;
        pictureList4.push(image);
      });
      this.imageList4 = pictureList4.toString();
      // console.log(" this.imageList4", this.imageList4);
      if (fileList.length == 2) {
        this.workshopSecondImage = true;
      }
    },
    // 删除生产车间照
    hideMateria(file, fileList) {
      var pictureList4 = [];
      for (let i in fileList) {
        pictureList4.push(fileList[i].url);
      }
      this.imageList4 = pictureList4.toString();
      setTimeout(() => {
        this.workshopSecondImage = false;
      }, 1000);
    },

    // 宣传视频上传
    broadcastSuccess(response, file) {
      this.loading = false;
      this.broadcastUrl = response.result;
      // console.log("this.broadcastUrl", this.broadcastUrl);
      utils.findvideocover(file.url, file);
    },
    progressBroadcast() {
      this.loading = true;
    },
    hidebroadcast() {
      setTimeout(() => {
        this.broadcastUrl = "";
      }, 900);
    },
    // 删除宣传视频
    changeBroadcastUrl() {
      this.broadcastUrl = "";
    },

    // 产品视频上传
    productSuccess(response, file) {
      this.loading = false;
      this.productUrl = response.result;
      // console.log("this.productUrl", this.productUrl);
      utils.findvideocover(file.url, file);
    },
    progressProduct() {
      this.loading = true;
    },
    hideproduct() {
      setTimeout(() => {
        this.productUrl = "";
      }, 900);
    },
    // 删除产品视频
    changeProductUrl() {
      this.productUrl = "";
    },

    // 提交
    async submit() {
      // console.log(" this.storeSecondImage", this.storeSecondImage);
      if (this.userMessage.memberAccount.isMember !== 1) {
        this.$message.error("当前账号不是主账号，无法修改企业信息，请登录主账号再提交");
      } else if (
        this.company == "" ||
        this.type == "" ||
        this.kind == "" ||
        this.primary == "" ||
        this.province == "" ||
        this.city == "" ||
        this.address == "" ||
        this.introduction == "" ||
        (this.imageList == "" && this.logoList.length == 0)
        // ||(this.imageList2 == "" && this.licenseList[0].url == "")
      ) {
        this.$message.error("当前信息填写不完整，请检查并填写完整");
      } else {
        let params = {
          supplierInformationEnterpriseType: this.type,
          supplierInformationTheMainType: this.kind,
          supplierInformationTheMainProduct: this.primary,
          supplierInformationProvince: this.province || this.handleAddress[0],
          supplierInformationCity: this.city || this.handleAddress[1],
          supplierInformationAddress: this.address,
          supplierInformationCompanyBrief: this.introduction,
          supplierInformationCompanyLogoUrl:
            this.imageList || this.logoList[0].url, //公司logo
          supplierInformationBusinessLicenseShow: this.showLicense ? 0 : 1,
          supplierInformationShopUrl: this.imageList3, //线下门店图片
          supplierInformationWorkshopUrl: this.imageList4, //生产车间照图片
        };
        if (this.imageList2) {
          params.supplierInformationBusinessLicenseUrl = this.imageList2; //企业执照
        }
        if (this.licenseList.length !== 0) {
          params.supplierInformationBusinessLicenseUrl =
            this.licenseList[0].url; //企业执照
        }

        if (this.broadcastUrl) {
          params.supplierInformationPromotionalVideoUrl = "";
          params.supplierInformationPromotionalVideoUrl = this.broadcastUrl; //宣传视频链接
        } else {
          params.supplierInformationPromotionalVideoUrl = "";
        }

        if (this.productUrl) {
          params.supplierInformationProductVideoUrl = "";
          params.supplierInformationProductVideoUrl = this.productUrl; //产品视频链接
        } else {
          params.supplierInformationProductVideoUrl = "";
        }
        let res = await this.$apiFun.setStore(params);
        // console.log("params", params);
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.storeDetail();
        }
      }
    },
  },

  watch: {
    "$route.name": {
      handler() {
        if (this.$route.name == "set_store") {
          this.storeDetail();
        }
      },
      // immediate: true,
      deep: true,
    },
    data(newData) {
      if (newData) {
        this.broadcastSuccess();
        this.progressBroadcast();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  font-family: Microsoft YaHei;
  height: 100%;
  .title {
    font-size: 0.24rem;
    font-weight: bold;
    color: #333333;
    line-height: 0.3rem;
    margin-bottom: 0.35rem;
    text-align: left;
  }
  .describe {
    font-size: 0.18rem;
    font-weight: 400;
    color: #666666;
    text-align: left;
  }

  // 基本信息
  .companyInformation {
    text-align: left;
    height: auto;

    .content {
      display: flex;
      // 左侧表单
      .left {
        width: 50%;
        .subheading {
          font-size: 0.2rem;
          font-weight: bold;
          color: #333333;
          line-height: 0.3rem;
          border-right: 2px solid #efefef;
        }
        .info {
          border-right: 2px solid #efefef;
          padding-top: 0.3rem;
          // element表单样式
          /deep/ .el-form {
            .companytype {
              font-size: 0.16rem;
              display: flex;
              align-items: center;
              margin-bottom: 25px;
              .leftText {
                width: 100px;
              }
              .selectItem {
                display: flex;
                cursor: pointer;
                margin-left: 0.3rem;
                justify-content: space-between;

                .checkImage {
                  width: 0.22rem;
                  height: 0.22rem;
                }
                .checkbox {
                  width: 0.2rem;
                  height: 0.2rem;
                  border: 1px solid #999999;
                }
              }
              .selectItem:nth-child(2) {
                margin-left: 0;
              }
            }

            .el-input {
              width: 90%;
            }
            .el-textarea {
              width: 90%;
              height: 4.9rem;
            }
            .el-checkbox__inner {
              width: 0.2rem;
              height: 0.2rem;
              border: 1px solid #999999;
              border-radius: 2px;
              &::after {
                height: 0.12rem;
                left: 0.07rem;
              }
            }
            // 点击样式
            .is-checked {
              .el-checkbox__inner {
                background-color: #f42551;
              }
            }

            .el-form-item__label,
            .el-input__inner,
            .el-textarea__inner,
            .el-checkbox__label {
              font-size: 0.16rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
            }

            .el-input__inner,
            .el-input__count {
              background-color: #f5f5f5;
            }

            .el-textarea__inner {
              height: 100%;
              background-color: #f5f5f5;
            }

            .el-select,
            .el-cascader {
              width: 100%;
            }

            .el-form-item__label {
              width: 100px !important;
              text-align: left;
            }
            .el-form-item__content {
              margin-left: 100px !important;
            }
          }
        }
      }

      // 右侧上传处
      .right {
        width: 47%;
        // background: skyblue;
        margin-left: 0.23rem;
        .subheading {
          font-size: 0.2rem;
          font-weight: bold;
          color: #333333;
          line-height: 0.3rem;
          margin-bottom: 0.3rem;
          margin-left: 0.21rem;
        }
        .logo,
        .license,
        .store,
        .video {
          display: flex;
          justify-content: space-evenly;
          font-size: 0.16rem;
          font-weight: 400;
          margin-bottom: 0.2rem;
          .leftText {
            width: 35%;
            color: #333333;
          }
          .uploadPlace {
            width: 50%;
            color: #999999;
            display: flex;
            justify-content: space-between;
            /deep/ .el-upload--picture-card {
              width: 1rem;
              height: 1rem;
              background: #f5f5f5;
              border-radius: 5px;
              cursor: pointer;
              margin-bottom: 0.1rem;
              border: none;
              position: relative;

              .uplogo {
                height: 100%;
                position: relative;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                .image {
                  height: 0.36rem;
                  width: 0.36rem;
                }
                .text {
                  line-height: 0.3rem;
                }
              }
            }

            .hide /deep/.el-upload--picture-card {
              display: none;
            }

            /deep/ .el-upload-list--picture-card .el-upload-list__item {
              width: 1rem;
              height: 1rem;
            }

            .checkbox {
              margin-left: 2%;
              font-size: 0.16rem;
              font-weight: 400;
              color: #333333;
              display: flex;
              align-items: center;
              input {
                width: 0.2rem;
                height: 0.2rem;
              }
              // input[type="checkbox"]:checked::after {
              //   background: #f42551 !important;
              // }
            }
          }
          .closeIcon {
            position: absolute;
            top: -0.1rem;
            right: -0.1rem;
            z-index: 2;
            width: 0.2rem;
          }
          .secondVideo {
            width: 1rem;
            height: 1rem;
            object-fit: fill;
            position: absolute;
            left: 0;
            top: 0;
          }
        }

        .video {
          .uploadPlace {
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
  }

  // 按钮
  .button {
    width: 1.9rem;
    height: 0.4rem;
    border-radius: 5px;
    font-size: 0.16rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 0.3rem;
    border: 1px solid;
    margin-top: 0.8rem;
    cursor: pointer;
  }
  .cancelButton {
    color: #333333;
  }
  .submitButton {
    border: none;
    background: #f42551;
    color: #ffffff;
    margin-left: 0.2rem;
  }
}
</style>